<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small">
            <el-form-item label="关联小程序">
              <el-select
                v-model="listPram.subAppId"
                clearable
                placeholder="请选择商家"
                @change="handerSearch"
              >
                <el-option
                  v-for="item in constants.wxList"
                  :key="item.appid"
                  :label="item.name"
                  :value="item.appid"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-table
        v-loading="listLoading"
        :data="listData.list"
        size="mini"
        class="table"
        highlight-current-row
        :header-cell-style="{ fontWeight: 'bold' }"
      >
        <el-table-column
          prop="title"
          label="描述"
          min-width="180"
        ></el-table-column>
        <el-table-column prop="point" label="积分" min-width="180">
        </el-table-column>
        <el-table-column
          label="额外奖励"
        >
          <template slot-scope="scope">
            <div
            label="额外奖励"
            v-for="(ele, index) in scope.row.extraPoints"
            :key="index"
          >
            <div style="display: flex;">
              <el-select style="width:300px" v-model="ele.type" disabled clearable placeholder="请选择类型">
                <el-option
                  v-for="kok in typeList"
                  :key="kok.value"
                  :label="kok.name"
                  :value="kok.value"
                >
                </el-option>
              </el-select>
              <el-input type="number" disabled v-model.number="ele.amount"> </el-input>
            </div>
          </div>
          </template></el-table-column>
        <el-table-column
          label="操作"
          min-width="100"
          fixed="right"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handlerUpdate(scope.row)"
              v-hasPermi="['admin:article:delete']"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handlerDelete(scope.row)"
              v-hasPermi="['admin:article:delete']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog  title="提示"
      :visible.sync="editDialogConfig.visible"
      width="896px">
      <el-form
        ref="form"
        :model="editDialogConfig.data"
        inline
        label-width="100px"
      >
        <el-form-item label="关联小程序">
          <el-select v-model="editDialogConfig.data.subAppId" disabled placeholder="请选择商家">
            <el-option
              v-for="item in constants.wxList"
              :key="item.appid"
              :label="item.name"
              :value="item.appid"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="editDialogConfig.data.title"> </el-input>
        </el-form-item>
        <el-form-item label="第几天">
          <el-input type="number" v-model.number="editDialogConfig.data.day"> </el-input>
        </el-form-item>
        <el-form-item label="积分">
          <el-input type="number" v-model.number="editDialogConfig.data.point"> </el-input>
        </el-form-item>
        <div style="display: flex;">
          <el-form-item
            label="额外奖励"
            v-for="(ele, index) in editDialogConfig.data.extraPoints"
            :key="index"
          >
            <div style="display: flex;">
              <el-select v-model="ele.type" clearable placeholder="请选择类型">
                <el-option
                  v-for="kok in typeList"
                  :key="kok.value"
                  :label="kok.name"
                  :value="kok.value"
                >
                </el-option>
              </el-select>
              <el-input type="number" v-model.number="ele.amount"> </el-input>
              <el-button type="danger" @click="delExtra(item, index)"
                >删除</el-button
              >
            </div>
          </el-form-item>
        </div>
        <el-button type="primary" @click="addExtra()">添加额外</el-button>
      </el-form>
      <div slot="footer">
        <el-button @click="close">
          取消
        </el-button>
        <el-button type="primary" @click="handelConfirm">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { signListApi, signDeleteApi, signUpdateApi } from "@/api/sign";
import edit from "./set";
export default {
  name: "SignList",
  components: { edit },
  data() {
    return {
      constants: this.$constants,
      listPram: {
        subAppId: "wxa219521f32c00a04"
      },
      listData: { list: [], total: 0 },
      listLoading: true,
      editDialogConfig: {
        visible: false,
        data: {}
      },
      typeList: [
          {
            name: '积分',
            value: 1
          },
          {
            name: '抽奖次数',
            value: 2
          },
        ]
    };
  },
  mounted() {
    this.handlerGetListData(this.listPram);
  },
  methods: {
    delExtra(obj, index) {
        obj.extraPoints.splice(index, 1);
      },
    addExtra() {
        this.editDialogConfig.data.extraPoints.push({
            amount: null,
            type: 1,
            isShow: false
          })
      },
    handleEdit(rowData) {
      this.editDialogConfig.data = rowData;
      this.editDialogConfig.visible = true;
    },
    close () {
      this.editDialogConfig.visible = false;
    },
    handelConfirm() {
      // update
      signUpdateApi(this.editDialogConfig.data).then(res => {
        this.$message.success('更新成功')
        this.close()
      })
    },
    handerSearch() {
      this.listPram.page = 1;
      this.handlerGetListData(this.listPram);
    },
    handlerGetListData(pram) {
      this.listLoading = true;
      signListApi(pram).then(data => {
        this.listData.list = data;
        this.listLoading = false;
      });
    },
    handlerUpdate(rowData) {
      this.editDialogConfig.visible = true;
      this.editDialogConfig.data = rowData;
    },
    handlerDelete(rowData) {
      this.$confirm("确定删除当前数据", "提示").then(result => {
        signDeleteApi({ id: rowData.id }).then(data => {
          this.$message.success("删除数据成功");
          this.handlerGetListData(this.listPram);
        });
      });
    },
    handleSizeChange(val) {
      this.listPram.limit = val;
      this.handlerGetListData(this.listPram);
    },
    handleCurrentChange(val) {
      this.listPram.page = val;
      this.handlerGetListData(this.listPram);
    }
  }
};
</script>

<style scoped lang="scss">
.articleModal {
  z-index: 333 !important;
}
.flex {
  display: flex;
  align-items: center;
  &-1 {
    flex: 1;
  }
  &-2 {
    flex: 2;
  }
}
</style>
